<template>
  <div>
    <el-table :data="bookList" style="width: 900px">
      <el-table-column prop="id" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="bookName" label="书名" width="180">
      </el-table-column>
      <el-table-column prop="auther" label="作者" width="180">
      </el-table-column>
      <el-table-column prop="copies" label="副本" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-button @click="showBook = true">添加</el-button>
    <el-drawer title="新增书本" :visible.sync="showBook" direction="ttb" :before-close="handleClose" size="60%">
      <el-form ref="form" :model="book" label-width="80px" style="width: 600px;">
        <el-form-item label="编号">
          <el-input v-model="book.id"></el-input>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="book.bookName"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="book.auther"></el-input>
        </el-form-item>
        <el-form-item label="副本">
          <el-input v-model="book.copies"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addBook">新增</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      bookList: [
        { id: 1, bookName: 'Java', auther: 'chen', copies: '0' },
        { id: 2, bookName: 'Java a', auther: 'chen1', copies: '1' },
        { id: 3, bookName: 'Java b', auther: 'chen2', copies: '2' },
        { id: 4, bookName: 'Java c', auther: 'chen3', copies: '3' },
        { id: 5, bookName: 'Java d', auther: 'chen4', copies: '4' },
        { id: 6, bookName: 'Java e', auther: 'chen5', copies: '5' },
        { id: 7, bookName: 'Java f', auther: 'chen6', copies: '6' },
        { id: 8, bookName: 'Java g', auther: 'chen7', copies: '7' },
        { id: 9, bookName: 'Java h', auther: 'chen8', copies: '8' },
      ],
      showBook: false,
      book:{bookName: '',
      id: '',
      auther: '',
      copies: ''},
      form:''
    };
  },
  computed: {

  },
  methods: {
    deleteClick(item) {
      console.log(item)
      this.bookList = this.bookList.filter(itm => itm.id != item.id)
    },
    handleClose() {
      this.showBook = false
    },
    addBook(){
      this.bookList.push(this.book)
      this.showBook = false
    }
  }
}
</script>

<style></style>
